.home-page {
  background: linear-gradient(180deg, #fff6e9 0%, #fff 100%);
  min-height: 100vh;
  font-family: 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;
  padding-bottom: calc(140rpx + env(safe-area-inset-bottom)); /* 70px*2=140rpx */
}

.header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 64rpx 40rpx 0 40rpx; /* 32px*2=64rpx，20px*2=40rpx */
}

.greeting {
  flex: 1;
}

.greeting .title {
  font-size: 60rpx; /* 30px*2=60rpx */
  font-weight: bold;
  color: #222;
}

.greeting .subtitle {
  font-size: 30rpx; /* 15px*2=30rpx */
  color: #888;
  margin-top: 8rpx; /* 4px*2=8rpx */
}

.greeting .username {
  font-size: 20rpx; /* 10px*2=20rpx */
  color: #888;
  margin-top: 4rpx; /* 2px*2=4rpx */
}

.shield image {
  width: 80rpx; /* 40px*2=80rpx */
  height: 80rpx;
}

.balance-card {
  background: linear-gradient(120deg, #444 60%, #222 100%);
  color: #fff;
  border-radius: 40rpx; /* 20px*2=40rpx */
  margin: 40rpx 40rpx 0 40rpx; /* 20px*2=40rpx */
  padding: 48rpx 40rpx 40rpx 40rpx; /* 24px*2=48rpx, 20px*2=40rpx */
  position: relative;
}

.balance-info {
  display: flex;
  align-items: center;
  font-size: 36rpx; /* 18px*2=36rpx */
  color: #ffe0b2;
}

.balance-info .eye {
  margin-left: 16rpx; /* 8px*2=16rpx */
  font-size: 36rpx;
}

.balance-amount {
  font-size: 80rpx; /* 40px*2=80rpx */
  font-weight: bold;
  margin: 32rpx 0 16rpx 0; /* 16px*2=32rpx, 8px*2=16rpx */
}

.recharge {
  position: absolute;
  right: 40rpx; /* 20px*2=40rpx */
  bottom: 40rpx;
  color: #ffe0b2;
  font-size: 32rpx; /* 16px*2=32rpx */
  cursor: pointer;
}

.scan-pay-row {
  display: flex;
  align-items: center;
  background: #ffe9c2;
  margin: 40rpx;
  border-radius: 32rpx;
  padding: 24rpx 0 24rpx 24rpx;
  box-sizing: border-box;
  justify-content: space-between;
}

.pay-qrcode {
  width: 120rpx;
  height: 120rpx;
  border-radius: 16rpx;
  background: #fff;
  margin-right: 32rpx;
  border: 2rpx solid #f2e6d9;
}

.scan-pay {
  display: flex;
  justify-content: space-around; /* 横向均匀分布 */
  margin: 40rpx 32rpx;
  background: #fbe7ce; /* 跟pay-btn背景色呼应 */
  border-radius: 32rpx;
  padding: 24rpx 0;
}

.scan-pay-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100rpx;
  cursor: pointer; /* 鼠标样式，移动端无影响 */
}

.scan-icon {
  width: 60rpx;  /* 控制图片宽度 */
  height: 60rpx; /* 高度保持一致 */
  margin-bottom: 12rpx;
}

.scan-pay-item text {
  font-size: 22rpx;
  color: #a67c52;
  font-weight: 600;
}
.scan-pay-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fbe7ce;
  border-radius: 24rpx;
  padding: 32rpx 0;
  font-size: 40rpx;
  color: #a67c52;
  margin-right: 24rpx;
}

.scan-icon {
  font-size: 44rpx;
  margin-right: 12rpx;
}

.records-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 48rpx 40rpx 0 40rpx; /* 24px*2=48rpx, 20px*2=40rpx */
  font-size: 40rpx; /* 20px*2=40rpx */
  color: #a67c52;
}

.records-header .all-records {
  font-size: 32rpx; /* 16px*2=32rpx */
  color: #c7a16b;
  margin-left: auto;
}

.records-list {
  margin: 0 40rpx; /* 20px*2=40rpx */
}

.record-item {
  display: flex;
  align-items: center;
  border-bottom: 2rpx solid #f2e6d9; /* 1px*2=2rpx */
  padding: 36rpx 0; /* 18px*2=36rpx */
}

.logo {
  width: 76rpx; /* 38px*2=76rpx */
  height: 76rpx;
  border-radius: 50%;
  margin-right: 28rpx; /* 14px*2=28rpx */
  background: #fff;
  border: 2rpx solid #eee; /* 1px*2=2rpx */
}

.record-info {
  flex: 1;
}

.store {
  font-size: 36rpx; /* 18px*2=36rpx */
  color: #333;
}

.datetime {
  font-size: 28rpx; /* 14px*2=28rpx */
  color: #bbb;
  margin-top: 4rpx; /* 2px*2=4rpx */
}

.amount {
  font-size: 36rpx; /* 18px*2=36rpx */
  color: #a67c52;
  font-weight: bold;
}

